<template>
  <div>
    <el-dialog :title='option.title' :visible.sync='isShow' @close="closeUser" width="890px" @open="openCreate"
      :close-on-click-modal="false" center>
      <div v-loading="loading">
        <div class="content">
          <el-card>
            <el-form size="mini" ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item prop="KEYTYPE" label="监控对象类型">
                    <el-select v-model="form.KEYTYPE" filterable clearable placeholder="请选择监控对象类型"
                      @change="changeType">
                      <el-option v-for="item in option.STATICOBJECTLIST" :key="item.value" :label="item.name"
                        :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- 队列只有123  坐席124 -->
                <el-col :span="12" v-if="form.KEYTYPE == 'queue' ">
                  <el-form-item prop="KEYLEVEL" label="渠道类型">
                    <el-select v-model="form.KEYLEVEL" filterable clearable placeholder="请选择渠道类型" @change="changeLevel">
                      <el-option key="1" label="多媒体渠道" value="1"></el-option>
                      <el-option key="2" label="多媒体渠道+受理渠道" value="2"></el-option>
                      <el-option key="3" label="多媒体渠道+受理渠道+业务类型" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-else>
                  <el-form-item prop="KEYLEVEL" label="渠道类型">
                    <el-select v-model="form.KEYLEVEL" filterable clearable placeholder="请选择渠道类型" @change="changeLevel">
                      <el-option key="1" label="多媒体渠道" value="1"></el-option>
                      <el-option key="2" label="多媒体渠道+受理渠道" value="2"></el-option>
                      <el-option key="3" label="全渠道" value="4"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="MEDIATYPE" label="多媒体类型">
                    <el-select v-model="form.MEDIATYPE" @change="changeType" filterable clearable placeholder="请选择多媒体类型">
                      <el-option v-for="item in mediaOption" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.KEYLEVEL != 1 && form.KEYLEVEL != 4">
                  <el-form-item prop="BUSICHANNEL" label="受理渠道">
                    <el-select v-model="form.BUSICHANNEL" filterable @change="changeType" clearable placeholder="请选择受理渠道">
                      <el-option v-for="item in option.channelOption" :key="item.FIELDKEY" :label="item.FIELDVALUE"
                        :value="item.FIELDKEY"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.KEYLEVEL == 3 ">
                  <el-form-item prop="BUSITYPE" label="业务类型">
                    <el-select v-model="form.BUSITYPE" filterable clearable placeholder="请选择业务类型" @change="changeType"> 
                      <el-option v-for="item in option.typeOption" :key="item.FIELDKEY" :label="item.FIELDVALUE"
                        :value="item.FIELDKEY"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="KEYNAME" label="监控key名称">
                    <el-input v-model="form.KEYNAME" placeholder="请输入监控key名称" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="STATUS" label="状态">
                    <el-select v-model="form.STATUS" filterable clearable placeholder="请选择状态"
                      :disabled="option.log=='1'">
                      <el-option v-for="item in option.STATUSLIST" :key="item.value" :label="item.name"
                        :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="12" v-if="this.option.log=='2'">
                  <el-form-item prop="STATUS" label="有效状态：">
                    <el-select v-model="form.STATUS" filterable placeholder="请选择有效状态">
                      <el-option v-for="item in STATUSLIST" :key="item.value" :label="item.name" :value="item.value"
                        :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col> -->
                <el-col :span="22">
                  <el-form-item prop="REMARK" label="备注：">
                    <el-input v-model="form.REMARK" type="textarea" :rows="2" placeholder="请输入备注"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
          </el-card>
          <div style="text-align:center;margin-top:20px">
            <el-button size="mini" @click='addType'>取消</el-button>
            <el-button type="primary" size="mini" @click="add">确认</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import query from "@/message/paramManagement/monitorKey/queryMonitorKey";
  // import Update from "@/message/paramManagement/realTimeMonitorParamSetting/update";
  // import request1 from "@/common/utils/requestTest";
  import requestYg from "@/common/utils/requestYg";
  import toolBox from "@/common/utils/toolBox";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  export default {
    name: "",
    data() {
      return {
        mediaOption: [{
            value: 'video',
            label: '视频'
          },
          {
            value: 'voice',
            label: '电话'
          },
          {
            value: 'chat',
            label: '文字'
          },
          {
            value: 'all',
            label: '全渠道'
          }
        ],
        loading: false,
        CHACEFLAGLIST: [{
            name: "是",
            value: "1"
          },
          {
            name: "否",
            value: "0"
          },
        ],
        STATUSLIST: [{
            name: "有效",
            value: "1"
          },
          {
            name: "无效",
            value: "0"
          },
        ],
        form: {
          KEYTYPE: "",
          KEYNAME: "",
          BUSICHANNEL: '',
          BUSITYPE: '',
          MEDIATYPE: '',
          STATUS: '',
          REMARK: '',
          KEYLEVEL: ''
        },
        rules: {
          KEYTYPE: [{
            required: true,
            message: "请选择监控对象类型",
            trigger: "blur"
          }],
          BUSICHANNEL: [{
            required: true,
            message: "请选择受理渠道",
            trigger: "change"
          }],
          // BUSITYPE: [{
          //   required: true,
          //   message: "请选择业务类型",
          //   trigger: "change"
          // }],
          KEYLEVEL: [{
            required: true,
            message: "请选择渠道类型",
            trigger: "change"
          }],
          MEDIATYPE: [{
            required: true,
            message: "请选择多媒体类型",
            trigger: "change"
          }],
          STATUS: [{
            required: true,
            message: "请选择状态",
            trigger: "change"
          }],
          KEYNAME: [{
            required: true,
            message: "请输入监控key名称",
            trigger: "blur"
          }],

          STATICMETRIC: [{
            required: true,
            message: "统计量名必填",
            trigger: "blur"
          }],
          METRICNAME: [{
            required: true,
            message: "统计量名备注必填",
            trigger: "blur"
          }],
          // MONIKEY:[
          //   {
          //     required: true,
          //     message: "因子编码必填",
          //     trigger: "blur"

          //   }
          // ],

          INTERVAL: [{
            required: true,
            message: "间隔时间必填",
            trigger: "blur"
          }],
          CHACEFLAG: [{
            required: true,
            message: "请选择缓存标志",
            trigger: "blur"
          }],
        }
      };
    },
    props: {
      //父元素传递的数据
      option: Object
    },
    components: {},
    computed: {
      isShow: {
        //创建用户弹窗是否显示
        get: function () {
          return this.option.isShow;
        },
        set: function (newValue) {
          this.option.isShow = newValue;
        }
      }
    },
    created: function () {

    },
    watch: {
    },
    methods: {
      // 修改监控对象类型时触发
      changeType() {
        if(this.form.KEYTYPE == 'agent'){
          this.form.BUSITYPE = ''
        }
        let media = ''
        if (this.form.MEDIATYPE != '') {
          let arr = this.mediaOption.find((item) => {
            if (item.value == this.form.MEDIATYPE) {
              return item.label
            }
          })
          media = arr.label
        }
        let channel = ''
        if (this.form.BUSICHANNEL != '') {
          let arr1 = this.option.channelOption.find((item) => {
            if (item.FIELDKEY == this.form.BUSICHANNEL) {
              return item.FIELDVALUE
            }
          })
          channel = arr1.FIELDVALUE
        }
        let type = ''
        if (this.form.BUSITYPE != '') {
          let arr2  = this.option.typeOption.find((item) => {
            if (item.FIELDKEY == this.form.BUSITYPE) {
              return item.FIELDVALUE
            }
          })
          type = arr2.FIELDVALUE
        }
        let str = this.form.KEYTYPE == 'agent' ? '技能' : '队列'
        this.form.KEYNAME = media + '' + channel + type + str
      },
      // 等级改变时执行，等级为4时，多媒体类型 为 全渠道
      changeLevel(data) {
        // 一开始打开页面，值不为空，后期修改等级时，将多媒体类型清空
        if (data !== 'open') {
          this.form.MEDIATYPE = "";
        }
        if (this.form.KEYLEVEL == '4') {
          this.mediaOption = [{
            value: 'all',
            label: '全渠道'
          }];
          this.form.BUSITYPE = ''
          this.form.BUSICHANNEL = ''
        } else {
          this.mediaOption = [{
              value: 'video',
              label: '视频'
            },
            {
              value: 'voice',
              label: '电话'
            },
            {
              value: 'chat',
              label: '文字'
            },
          ];
        }
        if(this.form.KEYLEVEL != '3' ){
          this.form.BUSITYPE = ''
        }
      },
      add() {
        //添加
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.loading = true;
            let resBody = new query()
            resBody.data.OPERFLAG = this.option.log == '1' ? 'I' : 'U';
            console.log('1111', resBody.data.OPERFLAG)
            if (this.option.log == "2") {
              resBody.data.ID = this.option.currentRow.ID;
            }
            resBody.data.STATUS = this.form.STATUS;
            resBody.data.KEYLEVEL = this.form.KEYLEVEL;
            resBody.data.KEYTYPE = this.form.KEYTYPE;
            resBody.data.BUSICHANNEL = this.form.BUSICHANNEL;
            resBody.data.KEYNAME = this.form.KEYNAME;
            resBody.data.BUSITYPE = this.form.BUSITYPE;
            resBody.data.MEDIATYPE = this.form.MEDIATYPE;
            resBody.data.REMARK = this.form.REMARK;
            requestYg(resBody)
              .then(response => {
                if (response.SYS_HEAD.ReturnCode === "000000") {
                  let mes = this.option.log == "1" ? "新增" : "修改";
                  this.$message({
                    type: "success",
                    message: `监控KEY${mes}${response.SYS_HEAD.ReturnMessage}!`
                  });
                  this.isShow = false;
                  this.$emit("refreshTable");
                } else {
                  this.$message({
                    type: "error",
                    message: `${response.SYS_HEAD.ReturnMessage}!`
                  });
                }
                this.loading = false;
              })
              .catch(error => {
                this.loading = false;
              });
            this.$refs.form.clearValidate(); //清楚表单验证
            this.$refs.form.resetFields();
          } else {
            this.$message({
              type: "warning",
              message: "新增 监控KEY请输入合法的数据！"
            });
            return false;
          }
        });
      },
      openCreate() {
        //打开弹窗事件
        this.$nextTick(function () {
          if (this.option.log == "2") {
            this.updateDate();
          } else {
            this.form.STATUS = '1';
          }
          this.changeLevel('open');
        })
      },
      updateDate() {
        this.form.KEYTYPE = this.option.currentRow.KEYTYPE;
        this.form.KEYNAME = this.option.currentRow.KEYNAME;
        this.form.BUSICHANNEL = this.option.currentRow.BUSICHANNEL;
        this.form.BUSITYPE = this.option.currentRow.BUSITYPE;
        this.form.MEDIATYPE = this.option.currentRow.MEDIATYPE;
        this.form.STATUS = this.option.currentRow.STATUS;
        this.form.KEYLEVEL = this.option.currentRow.KEYLEVEL;
        this.form.REMARK = this.option.currentRow.REMARK;
      },
      closeUser() {
        //关闭弹窗清楚表单数据并清楚表单验证
        // 重置表单数据
        this.$refs.form.clearValidate(); //清楚表单验证
        this.$refs.form.resetFields();
        this.$emit("refreshTable");
      },
      addType() { //关闭弹窗事件，清楚表单验证
        this.option.isShow = false;
        this.$refs.form.clearValidate();
        this.$refs.form.resetFields();
      },
    },
  };

</script>
<style lang="scss" scoped>
  .content {
    display: flex;
    flex-direction: column;
  }

  .require {
    color: red;
  }

  .dialog-text {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: red;
    font-size: 18px;
  }

  .role {
    width: 95%;
    border: 1px solid #eee;
    border-radius: 4px;
    height: 290px;

    .roleHeader {
      color: #606266;
      font-weight: 500;
      font-size: 14px;
      background: #f5f7fa;
      height: 42px;
      box-sizing: border-box;
      padding: 9px;
      overflow-y: auto;
    }
  }

  .el-card {
    overflow: inherit;
  }

</style>
